<template>
    <div class="header">
        <span class="logo" >
            <el-icon class="logoIcon"><eleme-filled /></el-icon>
            蒂莎编程
        </span>
        <el-icon class="headerButton" @click="userStore.handleAsideWidth()">
            <fold  v-if="userStore.asideWidth === '250px'"/>
            <Expand v-else/>
        </el-icon>
        <el-tooltip effect="dark" content="刷新" placement="bottom">
            <el-icon class="headerButton" @click="handleRefresh">
                <refresh />
            </el-icon>
        </el-tooltip>
        <div class="headerRight">
            <el-tooltip effect="dark" content="全屏" placement="bottom">
                <el-icon class="headerButton" @click="toggle">
                    <full-screen v-if="!isFullscreen" />
                    <aim v-else />
                </el-icon>
            </el-tooltip>
            <el-dropdown class="headerRightDropdown" @command="handleCommand">
                <span class="headerRightDropdownSpan">
                    <el-avatar class="headerRightDropdownSpanAvatar" :size="25" :src="userStore.userInfo?.avatar" />
                    {{ userStore.userInfo?.username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
    <FormDrawer ref="formDrawerRef" @submit="onSubmit" title="修改密码">
        <el-form :rules="rules" ref="formRef" :model="form" class="loginRightForm" label-width="80px">
            <el-form-item prop="oldpassword" label="旧密码">
                <el-input type="oldpassword" show-password v-model="form.oldpassword" placeholder="请输入旧密码">
                </el-input>
            </el-form-item>
            <el-form-item prop="password" label="新密码">
                <el-input type="password" show-password v-model="form.password" placeholder="请输入新密码">
                </el-input>
            </el-form-item>
            <el-form-item prop="repassword" label="确认密码">
                <el-input type="repassword" show-password v-model="form.repassword" placeholder="请输入新密码">
                </el-input>
            </el-form-item>
        </el-form>
    </FormDrawer>
</template>
<script setup>
import { logout } from '@/api/manager.js'
import { elMessageBox } from '@/hooks/elMessageBox'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { elNotification } from '@/hooks/elNotification'
import { useFullscreen } from '@vueuse/core'
import { ref, reactive } from 'vue'
import { updatePassword } from '@/api/manager.js'
import FormDrawer from '@/components/FormDrawer.vue'

const { isFullscreen, toggle } = useFullscreen() // 是否全屏以及切换全屏
const userStore = useUserStore()
const router = useRouter()


// 刷新功能
const handleRefresh = () => location.reload()

// 修改密码
const formDrawerRef = ref(null)

// 修改密码表单数据绑定
const form = reactive({
    oldpassword: '',
    password: '',
    repassword: ''
})

// 登陆表单验证
const rules = reactive({
    oldpassword: [
        {
            required: true,
            message: '旧密码不能为空',
            trigger: 'blur'
        }
    ],
    password: [
        {
            required: true,
            message: '新密码不能为空',
            trigger: 'blur'
        }
    ],
    repassword: [
        {
            required: true,
            message: '确认密码不能为空',
            trigger: 'blur'
        }
    ]
})

// 表单节点
const formRef = ref(null)

// 登录提交
const onSubmit = () => {
    formRef.value.validate((valid) => {
        if (!valid) {
            return;
        }
        formDrawerRef.value.showLoading()
        updatePassword(form).then(res => {
            elNotification('修改密码成功，请重新登录')
            userStore.logout()
            router.push('/login')
        }).finally(() => {
            formDrawerRef.value.hideLoading()
        })
    })
}


// 选中菜单栏
function handleCommand(e) {
    switch (e) {
        case "rePassword":
            formDrawerRef.value.open()
            break
        case "logout":
            handleLogout()
            break;
    }
}

// 退出登录
function handleLogout() {
    elMessageBox('是否要退出登录？').then(res => {
        logout().finally(() => {
            userStore.logout()
            router.push('/login')
            elNotification('退出登录成功')
        })
    })
}

</script>
<style scoped lang="less">
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    background-color: rgb(98, 98, 206);
    color: #fff;
    height: 64px;
    z-index: 1000;

    .headerButton {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 64px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
            background-color: rgb(87, 87, 205);
        }
    }

    .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        width: 250px;

        .logoIcon {
            margin-right: 5px;
        }
    }

    .headerRight {
        display: flex;
        align-items: center;
        margin-left: auto;

        .headerRightDropdown {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 5px;
            height: 64px;
            cursor: pointer;

            .headerRightDropdownSpan {
                display: flex;
                align-items: center;
                color: #fff;

                .headerRightDropdownSpanAvatar {
                    margin-right: 5px;
                }
            }
        }
    }
}
</style>